<script setup lang="ts">
import MultiScanSeries from '@renderer/views/multiScanSeriesPage/components/MultiScanSeries.vue'
import { provide, ref, watch } from 'vue'
import { useDbSettingStore } from '@renderer/store/pinia/dbSetting'
import { useScanStore } from '@renderer/store/pinia/scan'
import AddSeriesModal from '@renderer/views/multiScanSeriesPage/modal/AddSeriesModal.vue'
import ChooseAddScanSeriesTypeModal from '@renderer/views/multiScanSeriesPage/modal/ChooseAddScanSeriesTypeModal.vue'
import ScanContent from '@renderer/views/multiScanSeriesPage/components/ScanContent.vue'
import OpContainer from '@renderer/views/multiScanSeriesPage/components/OpContainer.vue'
import ParamsContainer from '@renderer/views/multiScanSeriesPage/components/paramsContainer/ParamsContainer.vue'


const addScanSeriesDialogVisible = ref(false)
const chooseAddScanSeriesTypeDialogVisible = ref(true)

const activeOpTypeRef = ref('area')

const preMonitorProtocolRef = ref({})
const monitorProtocolRef = ref({})
const positionsRef = ref()
const protocolDetails = ref()
const scanStore = useScanStore()
provide('multiSeries', {
  addScanSeriesDialogVisible,
  scanSeriesArr: scanStore.scanSeriesInfo.scanSeriesArr,
  activeScanSeries: scanStore.scanSeriesInfo.activeScanSeries,
  chooseAddScanSeriesTypeDialogVisible
})

provide('protocolsInfo', {
  preMonitorProtocolRef,
  monitorProtocolRef,
  positionsRef,
  protocolDetails
})

provide('viewOps', {
  activeOpTypeRef: activeOpTypeRef
})

const init = async () => {
  const dbSettingStore = useDbSettingStore()
  preMonitorProtocolRef.value = await dbSettingStore.getPreMonitorInfoProtocol()
  monitorProtocolRef.value = await dbSettingStore.getMonitorInfoProtocol()
  positionsRef.value = await dbSettingStore.getScanPositions()
  protocolDetails.value = await dbSettingStore.getProtocols()
}

init()

</script>

<template>
  <div class="w-full h-full grid grid-rows-[70px,1fr,80px] grid-cols-[250px,1fr]">
    <div class="row-span-2 border overflow-hidden">
      <params-container />
    </div>

    <div class="border h-[75px] overflow-hidden">
      <op-container />
    </div>

    <div class="p-[5px] overflow-hidden">
      <scan-content />
    </div>

    <div class="border col-span-2 overflow-hidden">
      <multi-scan-series />
    </div>
  </div>

  <add-series-modal />
  <choose-add-scan-series-type-modal />
</template>

<style scoped>

</style>
